<template>
	<view class="con size29 color333">
		<view class="color999 size26 ml30 mt30">模式</view>
		<view class="flex-ju-b flex-wrap">
			<image mode="widthFix" class="image width45vw mt15" src="/static/img/bisais.png"></image>
			<image mode="widthFix" class="image width45vw mt15" src="/static/img/faqius.png"></image>
			<image mode="widthFix" class="image width45vw mt15" src="/static/img/shunliangs.png"></image>
			<image mode="widthFix" class="image width45vw mt15" src="/static/img/dongzuos.png"></image>
		</view>

		<view class="color999 size26 ml30 mt50">特效</view>
		<view class="bgfff mt15 height100 ra15 flex-ju-b">
			<view class="ml30">落点,球速显示</view>
			<switch color="#27A752" :checked="checked1" style="transform:scale(0.7)" @change="ceshi1" />
		</view>
		<view class="bgfff mt30 height100 ra15 flex-ju-b">
			<view class="ml30">落点特效，落点显示</view>
			<switch color="#27A752" :checked="checked2" style="transform:scale(0.7)" @change="ceshi2" />
		</view>
		<view class="bgfff mt30 height100 ra15 flex-ju-b">
			<view class="ml30">人物骨架</view>
			<switch color="#27A752" :checked="checked3" style="transform:scale(0.7)" @change="ceshi3" />
		</view>
		<template>
			<view class="bgfff mt15 height100 ra15 flex-ju-b">
				<view class="ml30">球速显示</view>
				<switch color="#27A752" style="transform:scale(0.7)" @change="switch2Change" />
			</view>
			<view class="bgfff mt30 height100 ra15 flex-ju-b">
				<view class="ml30">球速特效</view>
				<switch color="#27A752" style="transform:scale(0.7)" @change="switch2Change" />
			</view>
			<view class="bgfff mt30 height100 ra15 flex-ju-b">
				<view class="ml30">落点显示</view>
				<switch color="#27A752" style="transform:scale(0.7)" @change="switch2Change" />
			</view>
			<view class="bgfff mt30 height100 ra15 flex-ju-b">
				<view class="ml30">落点特效</view>
				<switch color="#27A752" style="transform:scale(0.7)" @change="switch2Change" />
			</view>
			<view class="bgfff mt30 height100 ra15 flex-ju-b">
				<view class="ml30">网球轨迹</view>
				<switch color="#27A752" style="transform:scale(0.7)" @change="switch2Change" />
			</view>
			<view class="bgfff mt30 height100 ra15 flex-ju-b">
				<view class="ml30">人物骨架</view>
				<switch color="#27A752" style="transform:scale(0.7)" @change="switch2Change" />
			</view>
		</template>
		<template>
			<view class="bgfff mt15 height100 ra15 flex-ju-b">
				<view class="ml30">球速显示</view>
				<switch color="#27A752" style="transform:scale(0.7)" @change="switch2Change" />
			</view>
			<view class="bgfff mt30 height100 ra15 flex-ju-b">
				<view class="ml30">球速特效</view>
				<switch color="#27A752" style="transform:scale(0.7)" @change="switch2Change" />
			</view>
			<view class="bgfff mt30 height100 ra15 flex-ju-b">
				<view class="ml30">落点显示</view>
				<switch color="#27A752" style="transform:scale(0.7)" @change="switch2Change" />
			</view>
			<view class="bgfff mt30 height100 ra15 flex-ju-b">
				<view class="ml30">落点特效</view>
				<switch color="#27A752" style="transform:scale(0.7)" @change="switch2Change" />
			</view>
			<view class="bgfff mt30 height100 ra15 flex-ju-b">
				<view class="ml30">网球轨迹</view>
				<switch color="#27A752" style="transform:scale(0.7)" @change="switch2Change" />
			</view>
			<view class="bgfff mt30 height100 ra15 flex-ju-b">
				<view class="ml30">人物骨架</view>
				<switch color="#27A752" style="transform:scale(0.7)" @change="switch2Change" />
			</view>
		</template>

	</view>
	<!-- <input type="file" value="hhhf" @change="uploadVideo" /> -->
	<view @click="upmp" class="bgfff width1000 posifi bottom0 flex-ju-c height160">
		<view class="ibgto-27A752-C6FF00 width92vw height100 ra50 flex-ju-c color333 size29">上传</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				mode: "minicourt",
				checked1: true,
				checked2: false,
				checked3: false,
			}
		},
		onLoad() {
			// this.http('/api/get_take_status',{
			// 	task_id:'01e8177f-bcbe-46ddb8-adfa-452bcddfe465'
			// }).then(rtes=>{
			// })
			// uni.setStorageSync('task_id','2deea1c4-ae51-40dd-a5e7-2d4a07c73d76')

			// uni.setStorageSync('task_id',['2deea1c4-ae51-40dd-a5e7-2d4a07c73d76'])
		},
		methods: {
			ceshi1(e) {
				if (e.detail.value) {
					this.mode = 'minicourt'
					this.checked2 = false
					this.checked1 = true
					this.checked3 = false
				} else {
					this.mode = ''
				}
			},
			ceshi2(e) {
				if (e.detail.value) {
					this.mode = 'special_effect'

					this.checked1 = false
					this.checked2 = true
					this.checked3 = false

				} else {
					this.mode = ''
				}
			},
			ceshi3(e) {
				if (e.detail.value) {
					this.checked2 = false
					this.checked1 = false
					this.checked3 = true
					this.mode = 'pose_detection'
				} else {
					this.mode = ''
				}
			},

			upmp() {


				if (this.mode == '') {
					uni.showToast({
						title: "选择一种特效",
						icon: "none"
					})
					return
				}
				uni.chooseVideo({
					sourceType: ['album'],
					success: (res) => {
						var aspectRatio = res.width / res.height;
						if (aspectRatio == 16 / 9) {
							uni.showLoading({
								mask: true
							})
							console.log(33333)
							this.nupimg(res.tempFilePath)
						} else {
							uni.showLoading({
								mask: true
							})
							uni.uploadFile({
								url: this.apiurl +
									'/api/edit_video_attr',
								fileType: 'video',
								name: 'file',
								filePath: res.tempFilePath,
								formData: {
									filename: `${Date.now()}`,
								},
								header: {
									'Authori-zation': 'Bearer ' + uni.getStorageSync("token"),
								},
								success: (uploadFileRes) => {
									var ddt = JSON.parse(uploadFileRes.data)
									console.log(ddt, "jjj")
									uni.downloadFile({
										url: ddt.msg,
										success: (res) => {
											if (res.statusCode === 200) {

												this.http('/api/del_video', {
													file_path: ddt.msg.replace(
														this.apiurl +
														'/uploads/', '')
												}, 'post')
												this.nupimg(res.tempFilePath)
											}
										}
									})
								}
							})
						}

						return

					}
				})
			},
			nupimg(dsdt) {
				uni.uploadFile({
					url: this.apiurl +
						'/api/upload_oss_video',
					fileType: 'video',
					name: 'file',
					filePath: dsdt,
					formData: {
						filename: `${Date.now()}`,
					},
					header: {
						'Authori-zation': 'Bearer ' + uni.getStorageSync(
							"token"),
					},
					success: (uploadFileRes) => {



						var ddt = JSON.parse(uploadFileRes.data)
						console.log('kkk', ddt)

						this.http('/api/deal_video', {
							mode: this.mode,
							path_input_video: ddt.data.file_path,
							oss_path: ddt.data.oss_path,
							font_color: "#ffffff",
							rect_color: "#000b3c",
							trajectory_color: "#57c761"
						}, 'post').then(res => {
							// console.log(res.data.task_id,"bbba")
							// let id = uni.getStorageSync('task_id')
							// if(id){
							// 	id.push({
							// 		id:res.data.task_id,
							// 		video:ddt.data.oss_path
							// 	})
							// 	uni.setStorageSync('task_id',id)
							// }else{
							// 	uni.setStorageSync('task_id',[{
							// 		id:res.data.task_id,
							// 		video:ddt.data.oss_path
							// 	}])
							// }


							uni.showToast({
								title: "上传完成，正在解析中...",
								icon: "none"
							})
							setTimeout(() => {
								uni.switchTab({
									url: "/pages/user/index"
								})
							}, 1000)



						}).catch(res => {
							console.log('hhh', res)
						})
					},
					fail(ree) {
						console.log('hhh', ree)
					}

				})
			},
			switch2Change() {}
		}
	}
</script>

<style>
	page {
		background: #F6F7F8;
	}
</style>